<template>
  <div class="category_container">
    <div class="oneLine">
      <van-search placeholder="搜索商品，共146980款好物" @click="toSearch" input-align="center" />
    </div>



    <div class="category_content flex">

      <!-- 左边导航 -->
      <div class="left_scroll flex">
        <div class="nav_list">
          <div :class="['nav_item', navIndex === index ? 'active' : '']" @click="changNavIndex(index, item.id)"
            v-for="(item, index) in category1List" :key="item.id">{{ item.name }}</div>
        </div>
      </div>
      <!-- 右边导航 -->
      <div class="goods_content flex_c">
        <div class="title">
          <img :src="rightImg" alt="">
        </div>
        <div class="list_one " v-for="e in classItemList" :key="e.index">
          <div class="goods_list">
            <strong>{{ e.name }}</strong>
          </div>
          <div class="list_url flex">
            <div class="list_one_from flex_c " v-for="item in e.categoryList">
              <img class="list_one_one" :src="item.wapBannerUrl" @click="toCateList(item)">
              <text class="list_one_on">{{ item.name }}</text>
            </div>
          </div>

        </div>

      </div>
    </div>

  </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from "vue";
import Categoryapi from '../../api/category';
import { useRouter } from 'vue-router';


//跳转CateList页面商品详情
const router = useRouter()
const toCateList=(item:any)=>{
  console.log(item); 
  // let {categoryType,subCategoryId:superCategoryId,categoryId}=item
  console.log(item)
  let categoryType=item.categoryType
  let subCategoryId=item.id
  let categoryId=item.superCategoryId
  console.log(categoryType,subCategoryId,categoryId)
  router.push(`/catelist/${categoryType}/${subCategoryId}/${categoryId}`)

}

const toSearch = () => {
  router.push('/search')
}

interface category1ListType {
  name: string,
  id: number
  wapBannerUrl: string
}
//存储数据
const imgUrl = ref('')
const navIndex = ref(0)
const rightImg = ref('')
const classItemList = ref<any[]>([])

// 保存右侧的数据
const findCategory = ref<any>()
const changNavIndex = (num: number, id: number) => {
  navIndex.value = num
  imgUrl.value = category1List.value![num].wapBannerUrl
  getlistId(id)

}

//封装分类
const category1List = ref<category1ListType[]>()

const findCategory1List = async () => {
  try {
    let res = await Categoryapi.getCategory1List()
    category1List.value = res.data.data.categoryL1List
    console.log(res);
  } catch (error) {
    console.log(error);
  }
}
// 获取右侧数据的功能函数

const getlistId = async (id: number) => {
  try {
    let result = await Categoryapi.getCategory1ListId(id)
    rightImg.value = result.data.data.currentCategory.bannerList[0].picUrl
    classItemList.value = result.data.data.categoryGroupList
    console.log(result);
    console.log(classItemList.value);



  } catch (err) {
    console.log(err);

  }
}




onMounted(() => {
  findCategory1List()
  getlistId(11)

})
</script>
  
<style scoped lang="less">
.list_url{
  width: 264px;
  flex-wrap:wrap ;

}
.list_one_from{
  width: 33%;
}
.list_one {
  width: 264px;
}

.list_one_on {
  font-size: 12px;
  width: 72px;
  height: 36px;
  text-align: center;
}

.list_one_from .list_one_one {
  width: 72px;
  height: 72px;
}

.goods_list {
  width: 100%;
  height: 26px;
  font-size: 14px;
  margin: 12px 0;
  border-bottom: 1px solid #d9d9d9;


}

.nav_item.active {
  position: relative;
  background: #fff;
  color: #AB2B2B;
}

.goods_content {
  width: 100%;
  padding: 15px;
  height: 100%;
  justify-content:flex-end ;
  margin-left:81px ;
  margin-top: 54px;
}


.flex {
  display: flex;
}

.flex_c {
  display: flex;
  flex-direction: column;
}

.title {
  width: 264px;

}

.title img {
  width: 264px;
  height: 96px;


}

.category_container {
  height: 100%;
  margin-bottom: 54px;
  

}

.category_content {
  height: 100%;
}

.left_scroll {
  height: 100%;
  width: 81px;
  padding: 20px 0;
  border-right: 1px solid #d9d9d9;
  position:fixed;
  margin-top: 54px;}

.nav_list {
  width: 160px;
  // border-right: 1px solid #333;
  min-height: 100%;
  text-align: center;
  line-height: 16px;

}

.nav_list .nav_item {
  position: relative;
  height: 36px;
  text-align: center;
  line-height: 26px;
  font-size: 14px;
  padding: 4px 0;
}

.nav_item.active {
  background: #fff;
}

.nav_item.active::before {
  position: absolute;
  left: 3px;
  top: 15%;
  content: '';
  width: 2px;
  height: 50%;
  background: #AB2B2B;
}

.goods_list img {
  flex-wrap: wrap;
  width: 100%;
}

.oneLine {
  border-bottom: 1px solid #d9d9d9;
  position:fixed;
  width: 100%;
}
</style>